<template>
  <div id="register">
    <mt-header title="注册">
      <router-link to="login" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>

    <mt-field
      label="+86"
      type="text"
      placeholder="请输入手机号"
      v-model="name"
      @blur.native.capture="checkName"
      :state="nameState"
    />
    <mt-field label="" v-model="captcha" placeholder="请输入验证码">
      <span class="yzm">获取验证码</span>
    </mt-field>
    <mt-field
      label=""
      type="password"
      placeholder="请输入密码"
      v-model="pwd"
      @blur.native.capture="checkPwd"
      :state="pwdState"
    />
    <mt-field
      label=""
      type="password"
      placeholder="请确认密码"
      v-model="pwdd"
      @blur.native.capture="checkPwdd"
      :state="pwddState"
    />
    <mt-button type="primary" size="large" @click="checkForm"
      >快速注册</mt-button
    >
    <div class="user-agreement">
      <input type="checkbox" />
      已阅读并同意同意本平台的
      <a href="#">用户协议</a>
      和
      <a href="#">隐私政策</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      nameState: "",
      pwd: "",
      pwdState: "",
      pwdd: "",
      pwddState: "",
    };
  },
  methods: {
    checkForm() {
      if (this.checkName() && this.checkPwd() && this.checkPwdd()) {
        console.log("验证通过，执行注册");
      }
    },

    checkPwdd() {
      let exp = /^\d{6}$/;
      if (exp.test(this.pwdd) && this.pwd === this.pwdd) {
        this.pwddState = "success";
        return true;
      } else {
        this.pwddState = "error";
        return false;
      }
    },

    checkPwd() {
      let exp = /^\d{6}$/;
      if (exp.test(this.pwd)) {
        this.pwdState = "success";
        return true;
      } else {
        this.pwdState = "error";
        return false;
      }
    },

    checkName() {
      let exp = /^\w{3,10}$/;
      if (exp.test(this.name)) {
        this.nameState = "success";
        return true;
      } else {
        this.nameState = "error";
        return false;
      }
    },
  },
};
</script>

<style lang="scss">
#register {
  div {
    box-sizing: border-box;
  }
  .mint-header {
    background: #fff;
  }
  .mintui-back {
    color: #888;
  }
  .mint-cell-wrapper{
    font-size: 1rem;
  }
  .mint-header-title {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
  }
  .mint-cell-text {
    font-size: 1rem;
    color: #26c2bf;
  }
  .mint-field .mint-cell-title {
    padding-left: 1.16rem;
    width: 60px;
  }
  .yzm {
    font-size: 0.98rem;
    color: #26c2bf;
  }
  .mint-button--large {
    display: block;
    width: 91%;
    border-radius: 24px;
    margin: 1.26rem;
    font-size: 1.1rem;
  }
  .mint-button--primary {
    color: #fff;
    background-color: #26c2bf;
  }
  .user-agreement {
    font-size: 0.3546761247rem;
    color: #26c2bf;
    text-align: center;
    a {
      text-decoration: underline;
      color: #26c2bf;
    }
  }
}
</style>